<template>
	<div class="noticeList">
		<div class='my-header'></div>
        <!-- <van-search
            v-model="searchConditions.mx_ex2"
            label="墓型"
            placeholder="请输入墓型"
            @search="onSearch"
        >
        </van-search>
        <van-search
            v-model="searchConditions.mx_ex13"
            label="区域"
            placeholder="请输入区域"
            @search="onSearch"
        >
        </van-search> -->
        <FieldPopupPicker 
            v-model:field="searchConditions.mx_ex2"
            :required="true"
            name="mx_ex2" 
            label="墓型" 
            :columns="columns2" 
            :readonly="false" 
        />
        <FieldPopupCascader 
            :field="mx_ex13"
            @update:field="mx_ex13Change"
            name="mx_ex13" 
            label="区域" 
            :options="columns1" 
            confirmType="selectedOptions"
            :readonly="false" 
        />
        <div style="display: flex;align-items: center;">
            <van-search
                v-model="searchConditions.money1"
                left-icon=""
                label="价格区间"
                placeholder="请输入价格"
                @search="onSearch"
            >
            </van-search>
            <div style="height: 100%;background-color: #f7f8fa;display: flex;align-items: center;">~~</div>
            <van-search
                v-model="searchConditions.money2"
                show-action
                left-icon=""
                label=""
                placeholder="请输入价格"
                @search="onSearch"
            >
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
        </div>
        <!-- <van-search
            v-model="searchConditions.mx_ex6"
            show-action
            left-icon=""
            label="价格"
            placeholder="请输入价格"
            @search="onSearch"
        >
        </van-search> -->
		<div class="listmain">
			<PullRefreshList 
                v-model:refreshing="refreshing" 
                v-model:loading="loading"
                v-model:finished="finished" 
                v-model:list="list" 
                @load="onLoad"
            >
				<van-cell 
                    v-for="(item, index) in list" 
                    :key="index" 
                    :title='`墓型：${item.mx}` '
                    is-link 
                    center 
                >
                    <template #label>
                        <div class="label-class" style="display: flex">
                            <div style="display: flex; align-items: center; padding: 2vw">
                                <van-image 
                                    width="15vw" 
                                    height="15vw" 
                                    fit="fill" 
                                    :src="item.gmImg"
                                >
                                </van-image>
                            </div>
                            <div>
                                <div>金额：{{ item.amt }}</div>
                                <div>地址：{{ item.address }}</div>
                            </div>
                        </div>
                    </template>
                    <template #value>
                        <van-button 
                            type="primary" 
                            size="mini"
                            @click.stop="routerPush(item)"
                        >
                            预约看墓
                        </van-button>
                    </template>
                </van-cell>
			</PullRefreshList>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { showDialog, showConfirmDialog, showLoadingToast, showSuccessToast, closeToast } from 'vant'
	import PullRefreshList from '@/components/PullRefreshList.vue'
    import FieldPopupCascader from '@/components/FieldPopupCascader.vue'
    import { cancelYuyueInfoApi, getTomdTypeForMoneyApi, getAareaApi, getCemeteryPurchaseApi } from '@/apis'
    import { useStore } from '@/store'
    const router = useRouter()
    const route = useRoute()
    const store = useStore()

    const columns1: Ref<{
        text: string;
        value: string;
    }[]> = ref([
        // { text: '墓穴1', value: '墓穴1' },
        // { text: '墓穴2', value: '墓穴2' },
    ])
    const columns2: Ref<{
        text: string;
        value: string;
    }[]> = ref([
        // { text: '墓型1', value: '墓型1' },
        // { text: '墓型2', value: '墓型2' },
    ])
    
    onBeforeMount(async () => {
        showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            duration: 0
        });
        try {
            let res1 = await getAareaApi({
                iszj: 'N',
                time: new Date().getTime().toString(),
            })
            let forFun = (arr2) => {
				arr2.forEach((item, index) => {
					item.value = item.id
					item.text = item.text
					if (item.child.length > 0) {
						item.children = item.child
						forFun(item.children)
					}
				})
			}
			forFun(res1[0].child)
            columns1.value = res1[0].child
            let res2 = await getTomdTypeForMoneyApi({
                mx_ex2: '', //墓型
                money1: '', //价格1
                money2: '', //价格2
            })
            res2.forEach(item => {
                item.text = item.mx_ex2
                item.value = item.mx_ex2
            });
            columns2.value = res2
        } catch {

        } finally {
            closeToast();
        }
        
    })
    const mx_ex13: Ref<string> = ref('')
	const mx_ex13Change = (val) => {
        mx_ex13.value = ''
		val.forEach((item, index) => {
			if (val.length == (index+1)) {
				mx_ex13.value += item.text
				searchConditions.value.mx_ex13 = item.value
			} else {
				mx_ex13.value += item.text + '/'
			}
		})
    }
    const searchConditions: Ref<any> = ref({
        mx_ex2: '',
        status:  '',
        mx_ex13:  '',
        mx_ex6:  '',
        money1:  '',
        money2:  '',
    })
	const onSearch = async(value) => {
        if (!searchConditions.value.money1 && !searchConditions.value.money2 && !searchConditions.value.mx_ex2 && !searchConditions.value.mx_ex13) {
            showDialog({
				title: '提示',
				message: '查询条件请补充！'
			})
            return false;
        } else if ((searchConditions.value.money1 && !searchConditions.value.money2) || (searchConditions.value.money2 && !searchConditions.value.money1)) {
            showDialog({
				title: '提示',
				message: '价格区间请补充完整！'
			})
            return false;
        }
        showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            duration: 0
        });
        let val = await getCemeteryPurchaseApi({
            mx_ex2: searchConditions.value.mx_ex2,
            mx_ex13: searchConditions.value.mx_ex13,
            money1: searchConditions.value.money1,
            money2: searchConditions.value.money2,
        })
        closeToast();
		list.value = val
	}

	const list: Ref<Array<any>> = ref([])
	const loading: Ref<boolean> = ref(false)
	const finished: Ref<boolean> = ref(false)
	const refreshing: Ref<boolean> = ref(true)
	const onLoad = async(callback) => {
		// if (refreshing.value) {
		// 	list.value = [];
		// 	refreshing.value = false;
		// }
        if (!searchConditions.value.money1 && !searchConditions.value.money2 && !searchConditions.value.mx_ex2 && !searchConditions.value.mx_ex13) {
        } else if ((searchConditions.value.money1 && !searchConditions.value.money2) || (searchConditions.value.money2 && !searchConditions.value.money1)) {
            showDialog({
				title: '提示',
				message: '价格区间请补充完整！'
			})
        } else {
            let val = await getCemeteryPurchaseApi({
                mx_ex2: searchConditions.value.mx_ex2,
                mx_ex13: searchConditions.value.mx_ex13,
                money1: searchConditions.value.money1,
                money2: searchConditions.value.money2,
            })
            list.value.push(...val)
        }
		
        callback(true)
		// loading.value = false;
		// finished.value = true;
	}
	const routerPush = (val) => {
		// 后面看是跳转还是什么
		console.log(val)
        router.push(`/lookTombAppointment?sh_id=${val.gmId}&address=${val.address}`)
        // if (val.stype == '守灵') {
        //     router.push(`/wakeAppointment?sh_id=${val.id}`)
        // } else if (val.stype == '告别') {
        //     router.push(`/farewellAppointment?sh_id=${val.id}`)
        // } else if (val.stype == '接运') {
        //     router.push(`/cremationAppointment?sh_id=${val.id}`)
        // }
	}
    const cancel = (val) => {
        showConfirmDialog({
            title: '提示',
            message: '确定取消预约？'
        }).then(() => {
			if (val.sh_ex42 == 'Y') {
				showDialog({
					title: '提示',
					message: '已通过审核，请联系管理员取消！'
				})
			} else {
				showLoadingToast({
					message: '加载中...',
					forbidClick: true,
					duration: 0
				});
				cancelYuyueInfoApi({
					sh_id: val.sh_id
				}).then(async res => {
					closeToast();
					showSuccessToast({
						message: res[0].msg,
					});
					list.value = []
					loading.value = true
					finished.value = false
                    if (!searchConditions.value.money1 && !searchConditions.value.money2 && !searchConditions.value.mx_ex2 && !searchConditions.value.mx_ex13) {
                        showDialog({
                            title: '提示',
                            message: '查询条件请补充！'
                        })
                    } else if ((searchConditions.value.money1 && !searchConditions.value.money2) || (searchConditions.value.money2 && !searchConditions.value.money1)) {
                        showDialog({
                            title: '提示',
                            message: '价格区间请补充完整！'
                        })
                    } else {
                        let val = await getCemeteryPurchaseApi({
                            mx_ex2: searchConditions.value.mx_ex2,
                            mx_ex13: searchConditions.value.mx_ex13,
                            money1: searchConditions.value.money1,
                            money2: searchConditions.value.money2,
                        })
                        list.value.push(...val)
                    }
					
					loading.value = false
					finished.value = true
				}).catch(err => {
					closeToast();
				})
			}
            
        }).catch(err => {
			showConfirmDialog({
				title: '提示',
				message: '取消预约失败！'
			})
        })
        
        console.log(val)
    }
</script>

<style lang="scss" scoped>
	.noticeList {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
        background: url(@/assets/bg/bg11.png);
        background-size: 100% 100%;
	}
        // background: url(@/assets/policy/policybg-car.png) no-repeat;
    .my-header {
        display: flex;
        justify-content: center;
        // background: url(@/assets/policy/policybg.png) no-repeat;
        // background-size: 100% 90%;
        margin-bottom: 10px;
        border-radius: 10px;
    }
    
    .my-header::after {
        content: '';
        width: 100%;
        height: 185px;
        // margin-top: 20px;
        // background: url(@/assets/banner/gmjs_bg.png);
        background: url(@/assets/policy/policybg-car.png) no-repeat;
        background-size: 110% 110%;
        background-position: 30% 50%;
        border-radius: 5px;
    }
	.my-main {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
	}

	.maindiv {
		width: 90%;
		/* border: 1px solid #2C3E50; */
		box-shadow: 0px 0px 5px 5px #e3eee9;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 25px;
	}

	.maindivfont1 {
		color: #333333;
		font-size: 12pt;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.maindivfont2 {
		color: #666666;
		font-size: 10pt;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-bottom: 30px;
	}

	.listmain {
		flex: 1;
		overflow: auto;
	}
    .label-class {
        display: flex;
    }
    .van-search {
        padding: 0;
        
    }
    
</style>
